<template>
	<view>

		<van-nav-bar title="调入调出" right-text="申请记录" left-arrow fixed placeholder @click-left="onClickLeft"
			@click-right="onClickRight" />
		<view style="margin-top: 20rpx"></view>
		<van-form @submit="confirmRemoke">
			<van-cell-group inset>
				<van-field v-model="userInfo.yardName" autosize label="原单位" placeholder="请选择原单位" required
					:rules="[{ required: true, message: '请选择请原单位' }]" error-message-align="left" readonly />
				<van-field v-model="userInfo.deptName" autosize label="原部门" placeholder="请选择原部门" required
					:rules="[{ required: true, message: '请选择请原部门' }]" error-message-align="left" readonly />
				<van-field v-model="userInfo.positionName" autosize label="原级别" placeholder="请选择原级别" required
					:rules="[{ required: true, message: '请选择请原级别' }]" error-message-align="left" readonly />
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>
			<van-cell-group inset>
				<van-field v-model="formData.newYardName" autosize label="新单位" placeholder="请选择新单位" required
					:rules="[{ required: true, message: '请选择请新单位' }]" error-message-align="left" readonly is-link
					@click="showYardPicker = true">
				</van-field>
				<van-field v-model="formData.newDeptName" autosize label="新部门" placeholder="请选择新部门" required
					:rules="[{ required: true, message: '请选择请新部门' }]" error-message-align="left" readonly is-link
					@click="showdepModel()" />
				<van-field v-model="formData.newPositiontName" autosize label="新职级" placeholder="请选择新职级" 
					 error-message-align="left" readonly is-link
					@click="showPosPicker=true" />
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>

			<van-cell-group inset>
				<van-field v-model="formData.transferReason" autosize label="调动原因" placeholder="请输入调动原因" readonly is-link
					required error-message-align="left" clearable :rules="[{ required: true, message: '请选择调动原因' }]"
					@click='showReasonPicker=true'/>
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>
			<van-cell-group inset>
				<van-field label-width="auto" name="annex" label="说明附件" input-align="right">
					<template #input>
						<Upload v-model:fileList="annex" :showFileList="false" @update="getFile" 
							accept="image" >
							<template #uploadAction>
								<van-icon name="add-o" size="24"></van-icon>
							</template>
						</Upload>
					</template>
				</van-field>
				<view v-if="annex.length>0">
					<view class="image-box w-full">
						<view v-for="(image, index) in annex" class="item items-center">
							<van-image
								:src="image"
								class="item"
								width="100"
								height="100"
								cover
								@click="handlePreview(image)"
							/>
							<el-icon
								class="icon"
								@click="remove(index)"
								color="#fff"
								v-if="!disabled"
							>
								<Close />
							</el-icon>
						</view>
					</view>
				</view>
			</van-cell-group>
			<view style="margin-top: 20rpx"></view>
			<van-cell-group inset>
				<van-field v-model="formData.remark" autosize label="备注" placeholder="请输入备注" type="textarea" rows="3"
					error-message-align="left" clearable />
			</van-cell-group>
			<view class="boxx">
				<van-button type="primary" class="w-full" native-type="submit">提交</van-button>
			</view>
		</van-form>
		<!-- 新单位 -->
		<van-popup v-model:show="showYardPicker" position="bottom">
			<van-picker :columns="columnsYard" @confirm="onConfirmYard" :columns-field-names="{
				 'text': 'name',
			     'value': 'id',
			}" @cancel="showYardPicker = false" />
		</van-popup>
		<!-- 新部门 -->
		<van-popup v-model:show="showdepPicker" position="bottom">
			<van-picker :columns="columnsdep" @confirm="onConfirmDep" :columns-field-names="{
				 'text': 'name',
			     'value': 'id',
			}" @cancel="showdepPicker = false" />
		</van-popup>
		<!-- 职级 -->
		<van-popup v-model:show="showPosPicker" position="bottom">
			<van-picker :columns="positionColumns" @confirm="onConfirmPos" :columns-field-names="{
				 'text': 'name',
			     'value': 'id',
			}" @cancel="showPosPicker = false" />
		</van-popup>
		<!-- 调动原因 -->
		<van-popup v-model:show="showReasonPicker" position="bottom">
			<van-picker :columns="reasonColumns" @confirm="onConfirmReason"   @cancel="showPosPicker = false" />
		</van-popup>
		<view style="height: 100rpx;"></view>
	</view>
</template>
<script setup>
import { Plus, Close } from "@element-plus/icons-vue";
	import {
		pageWithFront,
		getLoginUserApi,
		pageOrg,
		pagePosition,
		dailyTransferApproveAdd
	} from '@/api'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	
	import { preview } from "@/utils/index";
	const userInfo = ref({})
	const showYardPicker = ref(false)
	const columnsYard = ref([])
	const showdepPicker = ref(false)
	const columnsdep = ref([])
	const positionColumns = ref([])
	const showPosPicker = ref(false)
	const showReasonPicker=ref(false)
	const annex=ref([]) //附件
	const reasonColumns=ref([
		{text:'异地分居申请调动',value:'异地分居申请调动'},
		{text:'照顾重疾父母申请调动',value:'照顾重疾父母申请调动'},
		{text:'其他原因申请调动',value:'其他原因申请调动'},
	])
	onLoad(async () => {
		const res = await getLoginUserApi();
		userInfo.value = res.data
		getNewYard()
		const result = await pagePosition()
		positionColumns.value = result.data
	})
	const getNewYard = () => {
		pageWithFront().then(res => {
			columnsYard.value = res.data.records
		})
	}
	const formData = ref({});
	const active = ref(0);
	onShow(() => {});
	const onClickLeft = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const onConfirmYard = (e) => { 
		formData.value.newYardName = e.selectedOptions[0].name
		formData.value.newYardId = e.selectedOptions[0].id
		showYardPicker.value = false

	}
	const onConfirmDep = (e) => {
        formData.value.newDeptName = e.selectedOptions[0].name
        formData.value.newDeptId = e.selectedOptions[0].id
        showdepPicker.value = false
	}
	const showdepModel = async () => {
		if (formData.value.newYardId) {
			pageOrg({
				parentId: formData.value.newYardId
			}).then(res => {
				columnsdep.value=res.data.records 
				showdepPicker.value = true
			})
		} else {
			uni.showToast({
				title: '请先选择新单位',
				icon: 'none'
			})
		}
	}
	const onConfirmPos = (e) => {
		formData.value.newPositiontName = e.selectedOptions[0].name
		formData.value.newPositiontId = e.selectedOptions[0].id
		showPosPicker.value = false
	}
	const onConfirmReason =(e)=>{ 
		formData.value.transferReason=e.selectedOptions[0].value
		showReasonPicker.value = false
	}
	const onClickRight = () => {
		uni.navigateTo({
			url: '/pages/mobilize/record'
		})
	}
	// 上传组件获取回显
	const getFile = (res) => { 
		annex.value = res.map((e) => e.url)
	}
	// 删除
	const remove = (index) => {
		annex.value.splice(index, 1); 
	};

	const confirmRemoke = async () => {
		console.log(122)
		try { 
			formData.value.oldYardId=userInfo.value.yardId
			formData.value.oldDeptId=userInfo.value.deptId 
			let data =JSON.parse(JSON.stringify(formData.value))
			delete data.newYardName
			delete data.newDeptName
			const res = await dailyTransferApproveAdd(data) 
			feedback.toast("提交成功");
		} catch (error) {} finally {

		}
	}
</script>
<style lang="scss" scoped>
	.card {
		background: #fff;
	}

	.btn {
		width: 93%;
		height: 88rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 88rpx;
		background: #1158bf;
		color: #fff;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.boxx {
		margin: 30rpx auto;
		width: 690rpx;
	}

	.btn {
		width: 93%;
		height: 88rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 88rpx;
		background: #1158bf;
		color: #fff;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.image-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0 24rpx;
		padding-bottom: 20rpx;
		.item {
			flex: 0 0 100px;
			margin-right: 20rpx;
			position: relative;
			.icon {
				position: absolute;
				top: 0%;
				right: 20rpx;
				z-index: 999;
				background-color: #ee0a24;
			}
		}
	}
	.flie-box {
		width: calc(100% - 200rpx);
		margin-left: 20rpx;
	}
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		flex: 0 0 100px;
		text-align: center;
		border: 1rpx dashed $uni-border-color;
	}
</style>